HTML+CSS 2019-04-12
前回
インラインとブロック
float
アップデート
やったこと
分かったこと
やってみる
分からなかったこと
全体の目標
エンジニアがマークアップしているというのはどういうことか雰囲気を知る
HTMLメールやWordPressでちょっとした見た目を調整できる
EPUBの調整ができる?
一からHTMLとCSSを書けるようになる
簡単なJavaScriptまで行けたら素晴らしい
今回の目標
レイアウトについてのCSSに慣れる(引き続き)
インラインとブロック(改めて)
様々なdisplay
float
絶対配置
インラインとブロック
block-inline.html
インライン要素
その要素に必要な分だけの幅
前後に改行は入らない
必ずしも四角にならない
その他のdisplay
display: inline-block
display: table
display: table-cell
display: flex;
display: grid
float
要素を左や右に寄せる
その後の要素は、これを回り込む
回り込み続ける
ちょっと使い難い
clear: left;、 clear: right;、clear: bothで解除
position
配置方法を指定
position: static; ... デフォルト。要素を書いた順番に並ぶ。
position: relative; ... 自分自身(要素)の配置場所はstaticと同じ。「今置かれてる場所」を基準にして、位置を変更できる。
position: absolute; ... 「親のボックス」を基準にして、位置を変更できる。
position: fixed; ... 画面上の固定された場所に配置される。
position: sticky; ... 使えないブラウザーが多い。
position: static;
デフォルト。
要素を書いた順番に並ぶ。
つまり「前の要素の後」「次の要素の前」に配置される。
position: relative
自分自身(要素)の配置場所はstaticと同じ。
「他の要素の配置に影響を与える」というのがstaticと違う。
position: absoluteの要素の基準となる
詳しくはposition: absoluteのところで
この要素自身の位置も調整可能
基準はデフォルト位置
position: absolute;
「基準のボックス」を基準にして配置
親要素を辿っていって・・・
最初のposition: relative;の要素
なければbody
「基準」というのは左上のこと
position: fixed;
画面内固定位置に配置
position: absolute;との違いに注意。
次回
単位
カスケード
参考リンク
何があるかな・・・